<template>
  <div class="store-bg">
    <div class="app-container store-search">
      <div class="search-store-top">
        <p class='count'>共找到<span v-text="totalCount || 0"></span>条相关信息</p>  
      </div>
      <div class="search-store-terms clearfix">
        <!-- 店铺地址 -->
        <div class="fl search-store-term term-area">
          {{mainArea}}
          <span></span>
          <div class="h-tp4"></div>
          <div class="search-store-term-area clearfix">
            <ul class="clearfix">
              <li class="fl" v-for="(area, index) in allArea" :key="index">
              {{area.areaName}}
                <div class="search-store-term-area-detail clearfix">
                  <ul class="clearfix">
                    <li class="fl" v-for="(area, index) in area.childs" :key="index" v-text="area.areaName" @click="doSelect(area.areaName, area.id)"></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 主营产品 -->
        <div class="fl search-store-term term-trade">
          {{mainTrade}}
          <span></span>
          <div class="h-tp4"></div>
          <div class="search-store-term-trade">
            <ul>
              <li v-for="(trade, index) in tradeList" :key="index" v-text="trade.tradeName" @click="selectTrade(trade.tradeName, trade.id)"></li>
            </ul>
          </div>
        </div>
        <!-- 营业额 -->
        <div class="fl search-store-term term-turnover">
          {{yearTurnover}}
          <span></span>
          <div class="h-tp4"></div>
          <div class="search-store-term-turnover">
            <ul>
              <li v-for="(turnover, index) in turnoverList" :key="index" v-text="turnover" @click="selectYearTurnover(turnover, index)"></li>
            </ul>
          </div>
        </div>
      </div>
      <div v-if="!allSearchResult || !allSearchResult.length || allSearchResult.length <= 0">
        <div class="bgImg"></div>
      </div>
      <!-- 店铺列表 -->
      <div class="clearfix store-info" v-if='allSearchResult && allSearchResult.length > 0' v-for="(result, index) in allSearchResult" :key="index">
        <div class="fl">
          <div class="clearfix">
            <div class="store-header-img fl" @click="gotoStore(result.vo_id)">
              <img v-lazy="result.storeLogoImg" alt="">
            </div>
            <div class="store-header-text fl">
              <p v-text="result.storeName" @click="gotoStore(result.vo_id)"></p>
              <p>
                <span class="main-store">主营产品：</span>
                <span v-text="result.mainProducts"></span>
              </p>
              <p @click="onContactShop(result.vo_id)">联系供应商</p>
            </div>
          </div>
          <div class="store-header-detail">
            <p>
              <span>销量</span><span v-text="result.salesVolume"></span>件
              <span class="shop-num">共</span><span v-text="result.styleCount"></span>款
            </p>
            <p class="area">
              <span>所在地：</span>
              <span v-text="result.storeArea"></span>
            </p>
          </div>
        </div>
        <div class="fr">
          <div class="fl store-goods" v-if="JSON.parse(result.goodsLuceneList).length>0" v-for="(storeGoodsImg, key) in JSON.parse(result.goodsLuceneList)" :key="key" @click="goToDetail(storeGoodsImg.id)">
            <div class="store-goods-img">
              <img v-lazy="storeGoodsImg.goodsMainPhotoPath" alt="">
            </div>
            <div class="price">￥{{storeGoodsImg.goodsStorePrice | currency}}</div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="page" v-if="totalPage > 1">
        <w-paging :total="totalPage" :current="param.currentPage" @on-page="onPage"></w-paging>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { apiSerachGoods } from 'js/api'

export default {
  data() {
    return {
      areaList: ['北京'],
      turnoverList: ['10万以下', '10万~50万', '50万~100万', '100万~150万', '150万~300万', '300万~500万', '500万~1000万', '1000万以上'],
      keyWord: '' || this.$route.query.key,
      mainArea: this.$route.query.area || '所在地区',
      mainTrade: this.$route.query.ind || '主营行业',
      yearTurnover: '年营业额',
      tradeList: this.$store.getters.tradeList,
      param: {
        currentPage: this.$route.query.page || 1,
        keyWord: '' || this.$route.query.key,
        searchType: 'store',
        showCount: 10,
        storeArea: '' || this.$route.query.area,
        mainIndustry: '' || this.$route.query.ind,
        yearSalesFloor: '' || this.$route.query.saledown,
        yearSalesCeiling: '' || this.$route.query.saleup
      },
      totalPage: 0,
      totalCount: 0, // 搜索结果条数
      allSearchResult: ''
    }
  },
  computed: {
    ...mapGetters(['allArea'])
  },
  watch: {
    $route(to, from) {
      this.param.keyWord = this.$route.query.key
      if (!this.$route.query.area) {
        this.mainArea = '所在地区'
      } else {
        this.mainArea = this.$route.query.area
      }
      if (!this.$route.query.ind) {
        this.mainTrade = '主营行业'
      } else {
        this.mainTrade = this.$route.query.ind
      }
      this.param.currentPage = this.$route.query.page
      this.param.storeArea = this.$route.query.area
      this.param.mainIndustry = this.$route.query.ind
      this.fetchSerachGoods()
    }
  },
  created() {
    // this.$store.commit('updateparam', this.param)
    this.fetchSerachGoods()
    this.fetchAllArea()
    this.tradeList = JSON.parse(sessionStorage.getItem('peopleList'))
  },
  methods: {
    ...mapActions(['fetchAllArea']),
    // 获取商品搜索列表
    fetchSerachGoods() {
      // 清空商品搜索结果
      this.allSearchResult = []

      // 请求接口
      apiSerachGoods(this.param).then((data) => {
        // 搜索结果
        this.allSearchResult = data.luceneList

        // 当前页
        this.param.currentPage = data.currentPage

        // 总页码
        this.totalPage = data.totalPage

        // 总数量
        this.totalCount = data.totalCount
      })
    },
    // 店铺地址
    doSelect(area, id) {
      this.mainArea = area
      this.param.storeArea = area
      // 路由中添加搜素条件---店铺地址
      let searchArea = this.$route.fullPath.split('&area')[0]
      let fullPath = `${searchArea}&area=${this.param.storeArea}`
      this.$router.push(decodeURIComponent(encodeURIComponent(fullPath)))
      // this.$store.commit('updateparam', this.param)
      // this.fetchSerachGoods()
    },
    // 主营行业
    selectTrade(trade, tradeId) {
      this.mainTrade = trade
      this.param.mainIndustry = trade
      // 路由中添加搜素条件---主营行业
      let searchMainIndustry = this.$route.fullPath.split('&ind')[0]
      let fullPath = `${searchMainIndustry}&ind=${this.param.mainIndustry}`
      this.$router.push(decodeURIComponent(encodeURIComponent(fullPath)))
      // this.$store.commit('updateparam', this.param)
      // this.fetchSerachGoods()
    },
    // 营业额
    selectYearTurnover(yearTurnover, index) {
      this.yearTurnover = yearTurnover
      if (index == 0) {
        this.param.yearSalesFloor = 0
        this.param.yearSalesCeiling = 100000
      } else if (index == 1) {
        this.param.yearSalesFloor = 100000
        this.param.yearSalesCeiling = 500000
      } else if (index == 2) {
        this.param.yearSalesFloor = 500000
        this.param.yearSalesCeiling = 1000000
      } else if (index == 3) {
        this.param.yearSalesFloor = 1000000
        this.param.yearSalesCeiling = 1500000
      } else if (index == 4) {
        this.param.yearSalesFloor = 1500000
        this.param.yearSalesCeiling = 3000000
      } else if (index == 5) {
        this.param.yearSalesFloor = 3000000
        this.param.yearSalesCeiling = 5000000
      } else if (index == 6) {
        this.param.yearSalesFloor = 5000000
        this.param.yearSalesCeiling = 10000000
      } else if (index == 7) {
        this.param.yearSalesCeiling = 500000000
        this.param.yearSalesFloor = 10000000
      }
      // 路由中添加搜素条件---营业额
      let searchYearDown = this.$route.fullPath.split('&saledown')[0]
      let fullPath = `${searchYearDown}&saledown=${this.param.yearSalesCeiling}&saleup=${this.param.yearSalesFloor}`
      this.$router.push(decodeURIComponent(encodeURIComponent(fullPath)))
      // this.fetchSerachGoods()
    },
     // 点击下一页
    onPage(index) {
      this.param.currentPage = index
      // 路由中添加--分页
      let searchPage = this.$route.fullPath.split('&page')[0]
      let fullPath = `${searchPage}&page=${this.param.currentPage}`
      this.$router.push(decodeURIComponent(encodeURIComponent(fullPath)))
      // this.fetchSerachGoods()
    },
    goToDetail(id) {
      this.$router.push('/goods/detail/' + id)
    },
    gotoStore(id) {
      this.$router.push('/shop/' + id)
    },
    // 聊天
    onContactShop(storeId) {
      if (!this.$store.getters.token) {
        this.$toast('亲，请先登录', () => {
          this.$router.push('/login')
        })
        return
      }
      const _this = this
      this.$store.dispatch('fetchUserRole', {
        token: this.$store.getters.token,
        callback(role) {
          _this.$store.dispatch('fetchCustomerByStoreId', {
            mobile: _this.$store.getters.mobile,
            storeId: storeId
          })
          // if (role != 2) {
          //   _this.$toast('您不是采购商，只有采购商才可以使用聊天功能')
          // } else {
          //   _this.$store.dispatch('fetchCustomerByStoreId', {
          //     mobile: _this.$store.getters.mobile,
          //     storeId: storeId
          //   })
          // }
        }
      })
    }
  }
}
</script>
<style lang="scss">
  .store-bg {
    .m-paging {
      margin: 50px 0 0 !important;
    }
  }
</style>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .store-bg {
    background-color: $color-white;
    margin-top: -10px;
    margin-bottom: -45px;
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 38px;
  }
  .store-search {
    border-top: 1px solid #ccc;
    margin-top: 10px;
  }
  .h-tp4 {
    height: 4px;
  }
  .bgImg {
    background-image: url(/static/img/icon_null.45ca649.png);
    margin: 50px auto auto;
    width: 100%;
    height: 420px;
    background-repeat: no-repeat;
    text-align: center;
    background-size: contain;
    background-position: 50% 50%;
  }
  .search-store-top {
    padding: 20px 0 14px 0;
    .count {
      color: #999;
    }
  }
  .search-store-terms {
    margin-bottom: 22px;
    .search-store-term {
      width: 140px;
      height: 32px;
      border: 1px solid #dddddd;
      text-align: center;
      line-height: 29px;
      font-size: 16px;
      color: #444444;
      margin-right: 6px;
      background-color: #fff;
      position: relative;
      cursor: pointer;

      .search-store-term-area {
        display: none;
        width: 368px;
        border: 1px solid #dddddd;
        background-color: #f6f6f6;
        cursor: pointer;
        position: relative;
        z-index: 2;

        ul li {
          font-size: 12px;
          margin-left: 20px;
          cursor: pointer;
          position: relative;

          .search-store-term-area-detail {
            display: none;
            min-width: 368px;
            border: 1px solid #dddddd;
            background-color: #fff;
            cursor: pointer;
            position: absolute;
            top: 10;
            z-index: 9;
          }
          &:hover {
            color: #f00384;

            .search-store-term-area-detail {
              display: block;
              color: #000
            }
          }
        }
      }
    }

    span {
      display: inline-block;
      background: url("../../assets/ico_arrow_down.png") no-repeat;
      width: 16px;
      height: 8px;
      margin-left: 4px;
    }
  }
  .term-area:hover .search-store-term-area {
      display: block;
  }
  .search-store-term-trade {
    border: 1px solid #dddddd;
    padding: 4px 0;
    background-color: #f6f6f6;
    cursor: pointer;
    position: relative;
    z-index: 2;

    li {
      width: 140px;
      font-size: 12px;
      margin-top: 4px;
      cursor: pointer;
      &:hover {
        color: #f00384;
      }
    }

    li:first-child {
      margin-top: 0px;
    }

    display: none;
  }
  .search-store-term-turnover {
    border: 1px solid #dddddd;
    padding: 4px 0;
    background-color: #f6f6f6;

    li{
      width: 140px;
      font-size: 12px;
      margin-top: 4px;
      cursor: pointer;
      &:hover {
        color: #f00384;
      }
    }

    li:first-child {
      margin-top: 0px;
    }

    display: none;
  }
  .term-turnover:hover .search-store-term-turnover {
    display: block;
  }
  .term-trade:hover .search-store-term-trade {
    display: block;
  }
  .store-info {
    margin-top: 10px;
    padding: 20px 0 0px 40px;
    background-color: #fff;
    cursor: pointer;
    border: 1px solid #cccccc;
    .store-header-img {
      width: 140px;
      height: 140px;
      border: 1px solid #ddd;
      margin-right: 30px;
      cursor: pointer;
      img {
        position: relative;
        width: 100%;
        height: 100%;
      }
    }

    .store-header-text p:nth-child(1) {
      font-size: 16px;
      color: #f00384;
      cursor: pointer;
    }
    .main-store {
      color: #000;
    }
    .store-header-text p:nth-child(3) {
      font-size: 12px;
      color: #f00384;
      margin-top: 20px;
      margin-bottom: 20px;
      border: 1px solid #f00384;
      height: 26px;
      width: 70px;
      border-radius: 3px;
      text-align: center;
      line-height: 24px;
      cursor: pointer;
    }
    .store-name {
      color: #000;
    }

    .store-header-text p:nth-child(2) {
      margin-top: 20px;
      font-size: 14px;
      color: #f00384;
      cursor: pointer;
    }

    .store-header-detail {
      margin-top: 34px;
      margin-bottom: 26px;
      font-size: 12px;
      cursor: pointer;

      p:first-child {
        margin-bottom: 12px;

        span {
          display: inline-block;
        }

        .shop-num {
          margin-left: 34px;
        }
      }
    }
  }
  .area {
    span {
      display:inline-block;
    }
    .area-detail {
      margin-left: 6px;
    }
  }
  .store-goods {
    margin-right: 12px;
    background-color: #f6f6f6;
    height: 218px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;

    .store-goods-img {
      width: 185px;
      height: 185px;
      background-color: #fff;
      cursor: pointer;
      img {
        position: relative;
        width: 100%;
        height: 100%
      }
    }

    .price {
      line-height: 30px;
    }
  }
  .page {
    margin-top: 38px;
  }
</style>
